<template>
  <div class="dashboard-editor-container">
    <div style="margin-bottom:20px">
      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="12" :span="12" ref='anitem'  v-for="item in data" :key='item.key'>
          <el-card >
            <div slot="header" style='display:flex;justify-content:space-between'>
              <span>
                {{$t(item.lang)}}
              </span>
              <el-tag>{{$t('home.All')}}</el-tag>
            </div>
            <count-to :decimals='2' class="card-panel-num" :startVal="0" :endVal="item.value" :duration="item.duration"></count-to>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!-- 收入统计 -->
    <el-row v-if="role != 2" style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <el-row>
        <h2 style="text-align:center">{{$t('home.Weekly_new_added_user')}}</h2>
      </el-row>
      <ve-line v-if="lineChartData" :data="lineChartData" :settings="lineChartSetting" />
    </el-row>
    <!-- 订单统计图 -->
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <el-row>
        <h2 style="text-align:center">{{$t('home.Weekly_number_of_payment')}}</h2>
      </el-row>
      <ve-histogram v-if="histogramChartData" :data="histogramChartData"  />
    </el-row>
    <!-- 渠道销售额排名(前十) -->
    <el-row v-if="role != 2" style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <el-row>
        <h2 style="text-align:center">{{$t('home.Business_developer_sales_ranking')}}</h2>
      </el-row>
      <!-- filter 条件查询 -->
      <div class="filter-container" style="overflow:hidden">
        <el-date-picker
            v-model="listDate"
            :start-placeholder="$t('common.Starting_date')"
            :end-placeholder="$t('common.Ending_date')"
            type="datetimerange"
            placeholder="选择日期"
            value-format="timestamp"
            style="margin-right:20px;">
        </el-date-picker>
        <el-button  type="primary" v-waves icon="el-icon-search" @click="distributorsSaleRankings">{{$t('common.Confirm')}}</el-button>
      </div>
      <el-table :data="list" element-loading-text="给我一点时间" v-loading="loading.list" border fit highlight-current-row style="width: 100%">
        <el-table-column prop="smuserPhone" :label="$t('common.Phone_number')"> </el-table-column>
        <el-table-column prop="smuserName" :label="$t('home.Name')"> </el-table-column>
        <el-table-column prop="businessName" :label="$t('home.Merchant_point')"> </el-table-column>
        <el-table-column prop="address" :label="$t('home.Address')"> </el-table-column>
        <el-table-column prop='fsmuserName' :label="$t('home.Supervisor')" /> 
        <el-table-column prop='fsmuserPhone' :label="$t('home.Supervisor_phone_number')" />
      </el-table>
    </el-row>
    <!-- 订单统计图 -->
    <el-row v-if="role != 2" style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <el-row>
        <h2 style="text-align:center">{{$t('home.Sales_category_proportion')}}</h2>
      </el-row>
      <ve-pie v-if="pieChartData" :data="pieChartData"  />
    </el-row>
  </div>
</template>

<script>

import CountTo from 'vue-count-to'
import { 
  userSum as userSums,
  orderSaleMoneySum as orderSaleMoneySums,
  addUserSevenList as addUserSevenLists,
  revenueSevenList as revenueSevenLists,
  SaleScale as SaleScales,
  distributorsSaleRanking as distributorsSaleRankings
} from '@/api/home'
import VeLine from 'v-charts/lib/line'
import VePie from 'v-charts/lib/pie'
import VeHistogram from 'v-charts/lib/histogram'
import Velocity from 'velocity-animate'
import 'velocity-animate/velocity.ui.js'
import { parseTime } from '@/utils'

export default {
  name: 'dashboard-admin',
  components: {
    CountTo,
    VeLine,
    VeHistogram,
    VePie
  },
  data() {
    return {
      lineChartSetting : {
        area: true
      },
      lineChartData: null,
      histogramChartData: null,
      pieChartData: null,
      type: '7',
      orderType: '7',
      data: [
        {
          key: 'orderSaleMoneySum',
          label: '总销售额',
          defaultLabel: '总销售额',
          value: 0,
          duration: 2500,
          lang: 'home.Gross_sales'
        },
        {
          key: 'userSum',
          label: '总用户数',
          defaultLabel: '总用户数',
          value: 0,
          duration: 3000,
          lang: 'home.Total_users'
        }
      ],
      categoryId: '',
      categoryName: '',
      list: null,
      loading: {
        list: false
      },
      listDate: ''
    }
  },
  methods: {
    async getList () {
      let temp = this.listDate ? this.listDate : []
      let [startTime, endTime] = temp
      const res = await getList({
        startTime,
        endTime
      })
      if (res.code === 1) {
        let { orderSaleMoneySum, userSum, revenueSevenList, addUserSevenList, saleScale, distributorsSaleRanking } = res.data
        this.data[0].value = orderSaleMoneySum
        this.data[1].value = userSum
        this.list = distributorsSaleRanking
        // 用户活跃量
        const lineChartRows = revenueSevenList.map(item => {
          return {
            '金额': item.num2,
            '日期': item.click_date
          }
        })
        this.lineChartData = {
            columns: ['日期', '金额'],
            rows: lineChartRows
        }
        // 支付笔数统计
        const histogramChartRows = addUserSevenList.map(item => {
          return {
            '笔数': item.num,
            '日期': item.click_date
          }
        })
        this.histogramChartData = {
            columns: ['日期', '笔数'],
            rows: histogramChartRows
        }
        // 销售额品类占比
        const pieChartRows = saleScale.map(item => {
          return {
            '种类': item.num4,
            '日期': item.sortName
          }
        })
        this.pieChartData = {
            columns: ['日期', '种类'],
            rows: pieChartRows
        }
      }
    },
    async distributorsSaleRankings () {
      let temp = this.listDate ? this.listDate : []
      let [startTime, endTime] = temp
      const { data } = await distributorsSaleRankings({startTime, endTime})
      this.list = data.distributorsSaleRanking
    },
    async getAllData () {
      let res = await Promise.all([
        userSums(), 
        orderSaleMoneySums(), 
        addUserSevenLists(), 
        revenueSevenLists(),
        SaleScales(),
        distributorsSaleRankings()
      ])
      res = res.map(item => item.data)
      let [{ userSum }, { orderSaleMoneySum }, { addUserSevenList }, { revenueSevenList }, { SaleScale }, { distributorsSaleRanking }] = res
      this.data[0].value = orderSaleMoneySum
      this.data[1].value = userSum
      this.list = distributorsSaleRanking
      // 用户活跃量
      const lineChartRows = addUserSevenList.map(item => {
        return {
          '用户量': item.num,
          '日期': item.click_date
        }
      })
      this.lineChartData = {
          columns: ['日期', '用户量'],
          rows: lineChartRows
      }

      // 支付笔数统计
      const histogramChartRows = revenueSevenList.map(item => {
        return {
          '笔数': item.num2,
          '日期': item.click_date
        }
      })

      this.histogramChartData = {
          columns: ['日期', '笔数'],
          rows: histogramChartRows
      }
      // 销售额品类占比
      const pieChartRows = SaleScale.map(item => {
        return {
          '种类': item.num4,
          '日期': item.sortName
        }
      })
      this.pieChartData = {
          columns: ['日期', '种类'],
          rows: pieChartRows
      }
     
    },
    async getAgentData () {
       let res = await Promise.all([
        userSums(), 
        orderSaleMoneySums(),  
        revenueSevenLists()
      ])
      res = res.map(item => item.data)
      let [{ userSum }, { orderSaleMoneySum }, { revenueSevenList }] = res
      this.data[0].value = orderSaleMoneySum
      this.data[1].value = userSum
      
      // 用户活跃量
      const lineChartRows = revenueSevenList.map(item => {
        return {
          '用户量': item.num2,
          '日期': item.click_date
        }
      })
      this.lineChartData = {
          columns: ['日期', '用户量'],
          rows: lineChartRows
      }
    }
  },
  created () {
    if (this.role != 2) {
      this.getAllData()
    } else {

    }
    //this.getList()
  },
  mounted () {
    this.$nextTick(() => {
      let anitem = this.$refs.anitem.map(item => item.$el)
      //  slideLeftBigIn, swoopIn, whirlIn, expandIn,bounceDownIn
       Velocity(anitem, "transition.slideLeftBigIn", { stagger: 300, drag: true })
    })
  },
  computed: {
    role () {
      return this.$store.state.user.userInfo.managerType
    }
  } 
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.card-panel-num {
  font-size: 30px;
 
}
.el-col {
  margin-bottom: 8px;
}
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
</style>
